<!--
  Generated template for the ProductListPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-content>

  <!--<ion-row>
    <ion-col col-4 *ngFor="let product of productList; index as i">
      <div class="product-item" (click)="openItemOption()">
        <div class="product-photo"><img src="{{ product.photo }}" /></div>
        <div class="product-name">{{ product.name }}</div>
      </div>
    </ion-col>
  </ion-row>-->

  <ion-list *ngIf="productList">

    <ion-refresher (ionRefresh)="loadProductList('refresh',$event)">
      <ion-refresher-content pullingIcon="arrow-dropdown" refreshingSpinner="circles"></ion-refresher-content>
    </ion-refresher>

    <ion-item>
      <ion-row *ngFor="let product of productList; let i=index;">
        <ion-col col-4 *ngIf="i%3 == 0">
          <div class="product-item" (click)="openItemOption(productList[i])" *ngIf="productList[i]">
            <div class="product-photo"><img src="{{ productList[i].photo }}" /></div>
            <div class="product-name" [ngClass]="{'text-highlight':productList[i].haveSpec||productList[i].addons.length}">{{ productList[i].name }}</div>
          </div>
        </ion-col>
        <ion-col col-4 *ngIf="i%3 == 0">
          <div class="product-item" (click)="openItemOption(productList[i+1])" *ngIf="productList[i+1]">
            <div class="product-photo"><img src="{{ productList[i+1].photo }}" /></div>
            <div class="product-name" [ngClass]="{'text-highlight':productList[i+1].haveSpec||productList[i+1].addons.length}">{{ productList[i+1].name }}</div>
          </div>
        </ion-col>
        <ion-col col-4 *ngIf="i%3 == 0">
          <div class="product-item" (click)="openItemOption(productList[i+2])" *ngIf="productList[i+2]">
            <div class="product-photo"><img src="{{ productList[i+2].photo }}" /></div>
            <div class="product-name" [ngClass]="{'text-highlight':productList[i+2].haveSpec||productList[i+2].addons.length}">{{ productList[i+2].name }}</div>
          </div>
        </ion-col>
      </ion-row>
    </ion-item>
  </ion-list>

  <!--<ion-infinite-scroll (ionInfinite)="loadProductList('more',$event)" *ngIf="productList.length != productCount">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>-->

</ion-content>
